import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { NavController, NavParams, InfiniteScroll, Refresher, Content, Img } from 'ionic-angular';
import { Park } from '../../providers/park-data/park';
import { ParkDataProvider } from '../../providers/park-data/park-data';
import { identifierModuleUrl } from '@angular/compiler';
import { updateImgs } from 'ionic-angular/components/content/content';
import { ParkDetailPage } from '../park-detail/park-detail';
import * as _ from "lodash";
/**
 * Generated class for the ParkListPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@Component({
  selector: 'page-park-list',
  templateUrl: 'park-list.html',
})
export class ParkListPage  implements AfterViewInit{
  @ViewChild(Content)_content:Content;

  parks:Park[]=[];

  private num:number=10;//每页显示记录数
  private curPage:number=1;//当前页数
  private hasMore:boolean=true;//是否有更多数据
  private isSearch:boolean=false;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public parkDataProvider:ParkDataProvider) {
  }

  ionViewDidLoad() {
  this.getParks(this.num,this.curPage);
  }
  getParks(num:number,page:number):void{
    this.parkDataProvider.getParks(num,page).subscribe(parks=>{
      // this.parks=parks;
      //保存原来数据
      if(parks.length>0){
        this.parks=this.parks.concat(parks);
      }else{
        this.hasMore=false;
      }
    });

  }

  doInfinite(infiniteScroll:InfiniteScroll):void{
    if(!this.hasMore){
      infiniteScroll.complete();
      return;
    }
    setTimeout(()=>{
      this.curPage+=1;
      this.getParks(this.num,this.curPage);
      infiniteScroll.complete();
    },500);
  }

    doRefresh(refresher:Refresher):void{
      setTimeout(()=>{
        this.curPage=1;
        this.getParks(this.num,this.curPage);
        refresher.complete();
      },1000);
    }
    
    itemTapped(park:Park):void{
      this.navCtrl.push(ParkDetailPage,{park:park});

    }
/**
 * 搜索
 * @param event 
 */
  searchParks(event:any){
      let query:string=event.target.value;
      if(query&&query.length>0){
        query=query.trim();
        this.parkDataProvider.getParksFromCache()
        .then(res=>{
          let _parks:Park[]=[];
          if(res&&res.rows && res.rows.length>0){
            console.log(`查询结果集：${res.rows.length}`);
            for(let i=0;i<res.rows.length;i++){
              _parks.push({
                objectId:res.rows.item(i).objectId,
                name:res.rows.item(i).name,
                point:res.rows.item(i).point
              } as Park);
            }
          }
          return _parks;
        })
        .then(parks=>{
          parks=_.filter(parks,(park:Park)=>{
            return park.name.lastIndexOf(query)>=0;
          });
          console.log(`搜索到${parks.length}条记录`);
          if(parks.length>0){
            this.isSearch=true;
            this.parkDataProvider.getSearchParks(parks).subscribe(data=>this.parks=data);
          }
        });
      }
    }
/**
 * 清除
 */
    resetParks(event :any){
      this.curPage=1;
      this.isSearch=false;
      this.parks=[];
      this.getParks(this.num,this.curPage);
    }

    ngAfterViewInit():void{
      //修复图片显示问题
      if(this._content){
        this._content.imgsUpdate=()=>{
          if(this._content._scroll.initialized&&this._content._imgs.length&&this._content.isImgsUpdatable){
            this._content._imgs.forEach((img:Img)=>{img._rect=null});
            updateImgs(this._content._imgs,this._content._cTop*-1,this._content.contentHeight,this._content.directionY,1400,400);
          }
        };
      }
    }
}
